<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<button>0</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>

<script>
  // var func;
  // if(true){
  //   var name = 'hello';
  //   func = function(){
  //     console.log(name);
  //   }
  // }
  // name = 'it change'
  //
  // func(); //这里本应该是hello才对的，但是这里是it change

  //3。没有块级作用域引起的问题：for的块级
  // var btns = document.getElementsByTagName('button');
  // for(var i=0;i<btns.length;i++){
  //   (function(i){
  //     btns[i].addEventListener('click',function(){
  //       console.log('第'+i+'个按钮被点击');
  //     });
  //   })(i);
  // }

  const btns = document.getElementsByTagName('button');
  for(let i =0;i<btns.length;i++){
    btns[i].addEventListener('click',function(){
      console.log('第'+i+'个按钮被点击');
    });
  }
</script>
</body>
</html>